﻿@{
	Page.Title = "Griddy.";
}

<div id="GriddySideBar">



	<div class="menu">
		<h2><span>side</span>Bar</h2>

		<ul>
			<li id="ToggleEdit">Toggle Editing</li>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>

	</div>
	<div class="handle">Griddy</div>
</div>

<div id="Griddy">
	<div class="gridster">
		<ul id="UlGrid">
			
			<li id="Row1" data-row="1" data-col="1" data-sizex="12" data-sizey="1"></li>
			




			<li data-row="2" data-col="1" data-sizex="8" data-sizey="3">
				<div id="featured">
					<img src="/img/demo1.jpg" />
					<img src="/img/demo2.jpg" />
					<img src="/img/demo3.jpg" />
				</div>
			</li>

			<li data-row="2" data-col="9" data-sizex="4" data-sizey="3"><img id="Calendar" src="/img/Calendar.jpg" /></li>



			<li style="background-color:#2BA6CB;" data-row="5" data-col="1" data-sizex="6" data-sizey="1"><h2 style="text-align:center; color:#FFF;">Rapid Prototyping</h2></li>
			<li data-row="5" data-col="7" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>
			<li data-row="5" data-col="8" data-sizex="1" data-sizey="1">  <img src="http://foundation.zurb.com/stylesheets/../images/homepageImgSass.png?1340846519" /> </li>

			
			<li data-row="5" data-col="9" data-sizex="4" data-sizey="4"><img id="Friends" src="/img/Friends.jpg" /></li>


			<li data-row="6" data-col="1" data-sizex="4" data-sizey="2">
				<h3>Ninja Support</h3>
				<img style="float:left;margin:0 10px 6px 0;" height="64" width:"64" src="http://www.woothemes.com/wp-content/uploads/2011/09/home-ico-wooninja.jpg" />
				<p>We have an eye for good design, and many of our themes are designed by well respected top web designers. </p>
			</li>
			
			<li data-row="6" data-col="5" data-sizex="4" data-sizey="2">
				<h3>Solid Framework</h3>
				<img style="float:left;margin:0 10px 6px 0;" height="64" width:"64" src="http://www.woothemes.com/wp-content/uploads/2011/09/home-ico-themes.jpg" />
				<p>Detailed theme documentation with professional video, tutorials, WooCodex and probably the best support forum anywhere! </p>
			</li>

			<li data-row="8" data-col="1" data-sizex="4" data-sizey="2">
				<h3>Great Designs</h3>
				<img style="float:left;margin:0 10px 6px 0;" height="64" width:"64" src="http://www.woothemes.com/wp-content/uploads/2011/09/home-ico-designs.jpg" />
				<p>Detailed theme documentation with professional video, tutorials, WooCodex and probably the best support forum anywhere! </p>
			</li>
			<li data-row="8" data-col="5" data-sizex="4" data-sizey="2">
				<h3>Something Else</h3>
				<img style="float:left;margin:0 10px 6px 0;" height="64" width:"64" src="http://www.woothemes.com/wp-content/uploads/2011/09/home-ico-framework.jpg" />
				<p>Detailed theme documentation with professional video, tutorials, WooCodex and probably the best support forum anywhere! </p>
			</li>

			<li data-row="8" data-col="1" data-sizex="1" data-sizey="1">  <img src="http://foundation.zurb.com/stylesheets/../images/homepageImgSass.png?1340846519" /> </li>
			<li data-row="8" data-col="2" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>
			<li data-row="8" data-col="3" data-sizex="1" data-sizey="1">  <img src="http://foundation.zurb.com/stylesheets/../images/homepageImgSass.png?1340846519" /> </li>
			<li data-row="8" data-col="4" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>


			<li data-row="9" data-col="1" data-sizex="1" data-sizey="1">  <img src="http://foundation.zurb.com/stylesheets/../images/homepageImgSass.png?1340846519" /> </li>
			<li data-row="9" data-col="2" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>
			<li data-row="9" data-col="3" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>
			<li data-row="9" data-col="4" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>


			<li data-row="10" data-col="1" data-sizex="8" data-sizey="2">
				<h3>Unrivaled Awesomness From Around The World!</h3>
				<img style="float:left;margin:0 10px 6px 0;" height="64" width:"64" src="http://www.woothemes.com/wp-content/themes/woo6/images/home-ico-affiliate.jpg" />
				<p>Detailed theme documentation with professional video, tutorials, WooCodex and probably the best support forum anywhere! </p>
				<p>Also this is generated through your affiliate links. PLUS - we'll give you a further 10% of all recurring subscriptions.</p>
			</li>

			<li data-row="8" data-col="9" data-sizex="1" data-sizey="1">  <img src="http://foundation.zurb.com/stylesheets/../images/homepageImgSass.png?1340846519" /> </li>
			<li data-row="8" data-col="10" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>
			<li data-row="8" data-col="11" data-sizex="1" data-sizey="1">  <img src="http://foundation.zurb.com/stylesheets/../images/homepageImgSass.png?1340846519" /> </li>
			<li data-row="8" data-col="12" data-sizex="1" data-sizey="1"> <img src="http://foundation.zurb.com/images/homepageImgAdvanced.png?1340846519" /> </li>


			<li data-row="12" data-col="1" data-sizex="4" data-sizey="2">
				<h3>Essence</h3>
				<p>The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.</p>
				<a href="#">Read More.</a>
			</li>
			<li data-row="12" data-col="1" data-sizex="4" data-sizey="2">
				<h3>Dimensions</h3>
				<p>The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.</p>
				<a href="#">Read More.</a>
			</li>
			<li data-row="12" data-col="1" data-sizex="4" data-sizey="2">
				<h3>Purpose</h3>
				<p>The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.</p>
				<a href="#">Read More.</a>
			</li>






			

			
			
			

			
			@*<li data-row="6" data-col="2" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="3" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="4" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="5" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="6" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="7" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="8" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="9" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="10" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="11" data-sizex="1" data-sizey="1"></li>
			<li data-row="6" data-col="12" data-sizex="1" data-sizey="1"></li>

			
			<li data-row="7" data-col="1" data-sizex="1" data-sizey="2"></li>
			<li data-row="7" data-col="2" data-sizex="2" data-sizey="2"></li>
			<li data-row="7" data-col="4" data-sizex="3" data-sizey="2"></li>
			<li data-row="7" data-col="7" data-sizex="4" data-sizey="2"></li>
			<li data-row="7" data-col="11" data-sizex="2" data-sizey="4"></li>

			<li data-row="9" data-col="1" data-sizex="10" data-sizey="2"></li>*@


			

			
			

			







			@*<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
			<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
			<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

			<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
			<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

			<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
			<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
			<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

			<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
			<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

			<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
			<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>*@
		</ul>
	</div>
</div>

